<template>
  <div class="app-main">
    <div class="operation-contain">
      <div class="operation-left">
        <el-page-header @back="goBack" content="项目任务" />
        <el-input v-model="list.filters.search" placeholder="请输入任务关键字" clearable prefix-icon="el-icon-search" size="medium" @input="getSearch"></el-input>
        <el-select v-model="list.filters.priority" placeholder="请选择优先级" clearable size="medium" @change="getSearch">
          <el-option v-for="item in prioritys" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="operation-right">
        <el-button v-perms="'info:projectDocument:add'" type="primary" size="medium" class="el-icon-circle-plus-outline pad" plain @click="$refs.addDrawer.open()"> 新增</el-button>
        <el-button size="medium" v-if="styleList === true" class="el-icon-menu" title="切换到看板模式" @click="styleList = !styleList"></el-button>
        <el-button size="medium" v-else class="el-icon-s-operation" title="切换到列表模式" @click="styleList = !styleList"></el-button>
      </div>
    </div>
    <template v-if="styleList === true">
      <div class="list-contain">
        <div class="contain-item" v-for="item in list.data" :key="item.id">
          <div class="item-left">
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link" v-if="item.status === 1">
                <i class="el-icon-help"></i>
              </span>
              <span class="el-dropdown-link" v-else-if="item.status === 2">
                <i class="el-icon-time"></i>
              </span>
              <span class="el-dropdown-link" v-else-if="item.status === 3">
                <i class="el-icon-circle-check"></i>
              </span>
              <span class="el-dropdown-link" v-else>
                <i class="el-icon-circle-close"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :class="item.status === 1 ? 'active' : ''" icon="el-icon-help" :command="() => updateStatus(item, 1)">待办的</el-dropdown-item>
                <el-dropdown-item :class="item.status === 2 ? 'active' : ''" icon="el-icon-time" :command="() => updateStatus(item, 2)">进行中</el-dropdown-item>
                <el-dropdown-item :class="item.status === 3 ? 'active' : ''" icon="el-icon-circle-check" :command="() => updateStatus(item, 3)">已完成</el-dropdown-item>
                <el-dropdown-item :class="item.status === 4 ? 'active' : ''" icon="el-icon-circle-close" :command="() => updateStatus(item, 4)">已拒绝</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span class="item-name" @click="$refs.detailDrawer.open(item.id)">{{ item.name }}</span>
            <span class="item-priority">
              {{ item.priority === 1 ? '无优先级' : item.priority === 2 ? '不重要' : item.priority === 3 ? '次要' : item.priority === 4 ? '主要' : '重要' }}
            </span>
            <template v-if="item.tag !== ''">
              <span v-for="(one, index) in item.tag.split(',')" class="item-tag" :key="index">{{ one }}</span>
            </template>
          </div>
          <div class="item-right">
            <span>{{ item.begin_time }}</span>
            <i>~</i>
            <span> {{ item.end_time }}</span>
          </div>
        </div>
      </div>
      <dPagination :page.sync="list.page" :size.sync="list.size" :total="list.total" @getAll="getList" />
    </template>
    <template v-else>
      <kanban @getAll="getList" :list="list" :detail="$refs.detailDrawer" />
    </template>
    <add ref="addDrawer" :prioritys="prioritys" :status="status" @getAll="getList" @updateStatus="updateStatus" />
    <detail ref="detailDrawer" @getAll="getList" :prioritys="prioritys" :status="status" @updateStatus="updateStatus" />
  </div>
</template>

<script>
import add from './Add'
import kanban from './Kanban'
import detail from './Detail'
export default {
  name: 'Project',
  components: {
    add,
    kanban,
    detail
  },
  data () {
    return {
      styleList: true,
      list: {
        data: [],
        loading: false,
        page: 1,
        total: 0,
        size: 10,
        filters: {
          search: '',
          prop: '',
          order: '',
          status: null,
          priority: null
        }
      },
      prioritys: [
        { label: '无优先级', value: 1 },
        { label: '不重要', value: 2 },
        { label: '次要', value: 3 },
        { label: '主要', value: 4 },
        { label: '重要', value: 5 }
      ],
      status: [
        { label: '待办的', value: 1 },
        { label: '进行中', value: 2 },
        { label: '已完成', value: 3 },
        { label: '已拒绝', value: 4 }
      ],
    }
  },
  created () {
    this.getList()
  },
  methods: {
    goBack () {
      this.$router.push('/info/project')
    },
    handleCommand (func) {
      func()
    },
    updateStatus (item, status) { // 修改状态
      const params = {
        id: item.id,
        status: status
      }
      this.$API({
        name: 'UpdateProjectTask',
        data: params,
        requireAuth: true
      }).then(res => {
        if (res.data.code === 200 && res.data.data[0] === 1) {
          this.getList()
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
      })
    },
    goAdd () {
      this.$router.push({ path: '/info/project/add' })
    },
    getSearch () {
      this.getList()
    },
    getList () { // 获取列表
      this.list.loading = true
      this.$API({
        name: 'GetProjectTaskList',
        params: {
          page: this.list.page,
          size: this.list.size,
          pid: this.$route.params.id,
          search: this.list.filters.search,
          order: this.list.filters.prop,
          sort: this.list.filters.order,
          status: this.list.filters.status,
          priority: this.list.filters.priority
        },
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200) {
          this.list.data = res.data.data.data
          this.list.total = res.data.data.count
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.list.loading = false
      })
    },
    confirmDelete (id) { // 删除
      this.$confirm('此操作将删除此项目及信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$API({
          name: 'DeleteProject',
          paths: [id],
          requireAuth: true
        }).then (res => {
          if (res.data.code === 200 && res.data.data === 1) {
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch(error => {
          this.$message.error(error)
        }).finally(() => {
          this.getList()
        })
      }).catch(() => {
      })
    },
    goDoc (id) {
      this.$router.push({  path: `/info/project/doc/${id}` })
    },
    edit (id) {
      this.$router.push({  path: `/info/project/edit/${id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dropdown-menu__item {
  font-size: 16px;
}
.active {
  color: #409EFF;
}
::v-deep .el-icon-help:before {
  color: rgb(254, 115, 0);
}
::v-deep .el-icon-time:before {
  color: rgb(74, 144, 226);
}
::v-deep .el-icon-circle-check:before {
  color: rgb(254, 188, 8);
}
::v-deep .el-icon-circle-close:before {
  color: rgb(236, 0, 25);
}
.app-main {
  .operation-contain {
    .operation-left {
      display: flex;
      justify-content: center;
      align-items: center;
      .el-input {
        margin-left: 10px;
      }
      .el-select {
        margin-right: 10px;
      }
    }
    .operation-right {
      display: flex;
      align-items: center;
    }
  }
  .list-contain {
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    .contain-item {
      width: 100%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:hover {
        background: #f5f6f8;
      }
      .item-left {
        .el-dropdown-link {
          font-size: 16px;
        }
        .item-name {
          margin: 0 10px;
          cursor: pointer;
          &:hover {
            color: slateblue;
          }
        }
        .item-priority {
          padding: 2px;
          border-radius: 4px;
          color: rgb(0, 140, 255);
          font-size: 12px;
          border: 1px solid rgb(0, 140, 255);
          margin-right: 10px;
        }
        .item-tag {
          padding: 2px;
          border-radius: 4px;
          color: #fff;
          background: orange;
          font-size: 12px;
          border: 1px solid orange;
          margin-right: 5px;
        }
      }
      .item-right {
        color: #777;
        font-size: 14px;
      }
    }
  }
}
</style>